<template>
  <view class="container">
    <!-- 学会信息 -->
    <view class="userinfo">
      <image src="../../static/img/bannerimg2.png" mode="aspectFill" style="width: 100rpx; height: 100rpx; border-radius: 100rpx 100rpx 100rpx 100rpx"></image>
      <view class="right">
        <view class="name">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">张同学</view>
          <image src="../../static/icon/nv.png" mode="" style="width: 42rpx; height: 42rpx"></image>
          <view class="school">第五实验中学</view>
        </view>
        <view class="subject">初三 | 数学</view>
      </view>
    </view>

    <!-- 学生地址 -->
    <view class="place">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin-bottom: 16rpx">
        <text>学生姓名</text>
        <text style="padding-left: 30rpx">123****1234</text>
      </view>
      <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">郑州市 二七区 XX街道XX小区X号楼XXX</view>
    </view>

    <!-- 科目 -->
    <view class="subjectbox">
      <view style="display: flex; justify-content: space-between; align-items: center">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">科目选择</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">初三 | 数学</view>
      </view>
      <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 30rpx">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">购买课时</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">已购200课时</view>
      </view>
    </view>
    <!-- 未预约时间 -->
    <view class="yuyuebox" v-if="false">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">暂无预约上课时间</view>
    </view>
    <!-- 已预约时间 -->
    <view class="yuyuebox" v-else>
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">已预约上课时间</view>
      <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; margin-top: 16rpx">周一、周二（共4课时）</view>
      <!-- 周几 -->
      <view style="display: flex; align-items: center; margin-top: 30rpx; margin-bottom: 26rpx">
        <view :class="{ common: true, act: actindex == index }" v-for="(item, index) in week" :key="index" @click="actindex = index">{{ item }}</view>
      </view>
      <!-- 时间段 -->
      <view style="display: flex">
        <view class="yuyueitem" v-for="index in 4" :key="index">
          <view>已取消预约</view>
          <view>8:00-10:00</view>
        </view>
      </view>
      <!-- 剩余课时 -->
      <view style="font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333; margin-top: 20rpx">剩余可预约课时 30/200</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      actindex: 0,
      week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    };
  }
};
</script>

<style lang="scss" scoped>
.container {
  .userinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 20rpx;
    width: 710rpx;
    height: 164rpx;
    padding: 30rpx;
    background: #f1f3ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .right {
      margin-left: 20rpx;
      .name {
        display: flex;
        align-items: center;
        margin-bottom: 14rpx;
        .school {
          font-size: 22rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          width: 172rpx;
          height: 40rpx;
          background: #eaedfd;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          color: #3553e8;
          text-align: center;
          line-height: 40rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .subject {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
      }
    }
  }
  .place {
    box-sizing: border-box;
    width: 710rpx;
    height: 160rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 20rpx 20rpx 20rpx;
    padding: 30rpx;
    border: 2rpx solid #f1f1f1;
  }
  .subjectbox {
    box-sizing: border-box;
    width: 710rpx;
    height: 180rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx;
    padding: 30rpx;
    border: 2rpx solid #f1f1f1;
  }
  .yuyuebox {
    box-sizing: border-box;
    width: 710rpx;
    height: 434rpx;
    margin: 20rpx;
    padding: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    .common {
      width: 102rpx;
      height: 62rpx;
      font-size: 28rpx;
      text-align: center;
      line-height: 62rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .act {
      background: #ecefff;
      color: #3553e8;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
    .yuyueitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 110rpx;
      background: #ffffff;
      margin-right: 4rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #999999;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #f1f1f1;
    }
  }
}
</style>
